<template>
	<view class="menus-list" v-if="isData">
		<form report-submit="true">
			<button formType="submit" class="btn-normal">
				<view class="menus-item dis-flex b-f">
					<view class="menus-item__left flex-box dis-flex flex-y-center"><text class="menus-item__name f-30">头像</text></view>
					<image class="menus-item__right menu-face" mode="aspectFill" :src="userInfo.avatarUrl" @tap="upLoadAvatarUrl"></image>
				</view>
			</button>
		</form>
		<form report-submit="true">
			<button formType="submit" class="btn-normal">
				<view class="menus-item dis-flex b-f" @tap="toInputNickName">
					<view class="menus-item__left flex-box dis-flex flex-y-center"><text class="menus-item__name f-30">昵称</text></view>
					<view class="menus-item__right flex-box dis-flex flex-x-end flex-y-center">
						<text class="f-26 col-7">{{ userInfo.nickName }}</text>
					</view>
					<!-- <view class="menus-item__right flex-box dis-flex flex-x-end flex-y-center"><text class="iconfont icon-xiangyoujiantou f-26 col-7"></text></view> -->
				</view>
			</button>
		</form>
		<view class="auth-tips">第三方账号绑定情况（{{ snsInfo.length }}）</view>

		<view class="btn-normal" v-for="sns in snsInfo" :key="sns">
			<block v-if="sns === 'wechat'">
				<view class="menus-item dis-flex b-f">
					<view class="menus-item__left flex-box dis-flex flex-y-center"><text class="menus-item__name f-30">微信公众号</text></view>
					<view class="menus-item__right flex-box dis-flex flex-x-end flex-y-center"><view class="unbind-auth" :data-type="sns" @tap="unbindOauth">解绑</view></view>
				</view>
			</block>
			<block v-if="sns === 'wxapp'">
				<view class="menus-item dis-flex b-f">
					<view class="menus-item__left flex-box dis-flex flex-y-center"><text class="menus-item__name f-30">微信小程序</text></view>
					<view class="menus-item__right flex-box dis-flex flex-x-end flex-y-center"><view class="unbind-auth" :data-type="sns" @tap="unbindOauth">解绑</view></view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
import Route from '@/utils/Route.js';
import Tools from '@/utils/Tools.js';
export default {
	data() {
		return {
			isData: false,
			userInfo: {},
			snsInfo: [],
			saveParam: {}
		};
	},
	onLoad() {
		uni.$on('setNickName', res => {
			this.$set(this.userInfo, 'nickName', res.nickName);
			this.$set(this.saveParam, 'nickName', res.nickName);
			this.$nextTick(() => {
				this.saveInfo();
			});
		});
	},
	onUnload() {
		uni.$off('setNickName');
	},

	onShow() {
		this.getUserInfo();
		this.getSnsInfo();
	},
	methods: {
		toInputNickName() {
			Route.navigateTo({
				url: '/pages/user/setting/name/name?nickName=' + this.userInfo.nickName
			});
		},
		upLoadAvatarUrl() {
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				success: res => {
					const filePath = res.tempFilePaths[0];
					this.$set(this.userInfo, 'avatarUrl', filePath);
					uni.showLoading({
						title: '正在上传...'
					});
					this.$upload(
						this.$api.uploadImage,
						filePath,
						'avatarUrl',
						{},
						res => {
							this.$set(this.userInfo, 'avatarUrl', res.data.file_path);
							this.$set(this.saveParam, 'avatarUrl', res.data.file_path);
							this.$nextTick(() => {
								this.saveInfo();
							});
						},
						null,
						() => {
							uni.hideLoading();
						}
					);
				}
			});
		},
		getUserInfo() {
			uni.showLoading({
				title: '获取用户信息'
			});
			this.$post(
				this.$api.getUserInfo,
				{},
				res => {
					this.isData = true;
					this.userInfo = res.data.userInfo;
					this.saveParam = {
						avatarUrl: this.userInfo.avatarUrl,
						nickName: this.userInfo.nickName,
						gender: this.userInfo.gender
					};
				},
				null,
				() => {
					uni.hideLoading();
				}
			);
		},
		saveInfo() {
			this.$post(
				this.$api.saveBaseInfo,
				{ ...this.saveParam },
				res => {
					this.getUserInfo();
				},
				null
			);
		},
		getSnsInfo() {
			this.$post(
				this.$api.getSnsInfo,
				{},
				res => {
					this.snsInfo = res.data.snsInfo;
				},
				null
			);
		},
		unbindOauth(e) {
			this.$post(
				this.$api.unbindWechatAuth,
				{ type: e.currentTarget.dataset.type },
				res => {
					this.getSnsInfo();
				},
				null
			);
		},
		openVconsole() {
			var vConsole = new VConsole();
		}
	}
};
</script>

<style>
/* 菜单列表 */

.menus-list {
	/* margin-top: 20rpx; */
}

.menus-list .menus-item {
	position: relative;
	padding: 28rpx 28rpx;
	border-bottom: 1rpx solid #eee;
}

.menus-list .menus-item .menus-item__name {
	color: #444;
	margin-left: 20rpx;
}
.menu-face {
	height: 100rpx;
	width: 100rpx;
}
.auth-tips {
	font-size: 26rpx;
	color: #777;
	line-height: 40rpx;
	padding: 4rpx 20rpx;
	margin: 20rpx auto 10rpx;
}
.unbind-auth {
	padding: 10rpx 20rpx;
	border-radius: 8rpx;
	font-size: 24rpx;
	color: #999;
	border: 1rpx solid #ccc;
}
.auth-no-bind {
	width: 750rpx;
	height: 80rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #333;
}
</style>
